<template>
  <div class="page-container">
    <div class="container">
    <h1>工资发放审批</h1>
    <!-- 审批状态筛选 -->
    <el-row justify="start">
      <el-select v-model="approvalStatusFilter" placeholder="筛选审批状态" @change="fetchSalaries">
        <el-option label="所有" :value="null"></el-option>
        <el-option label="通过" :value="'通过'"></el-option>
        <el-option label="待审批" :value="'待审批'"></el-option>
        <el-option label="拒绝" :value="'拒绝'"></el-option>
      </el-select>
    </el-row>

    <el-table
        :data="filteredSalaries"
        border
        stripe
        style="width: 100%"
        ref="salaryTable"
        @selection-change="handleSelectionChange"
    >
      <!-- 动态控制多选框是否显示 -->
      <el-table-column
          type="selection"
          width="55"
          align="center"
          :selectable="isSelectable"
      />
      <el-table-column prop="id" label="工资记录ID" width="100" align="center" />
      <el-table-column prop="employeeName" label="员工姓名" align="center" />
      <el-table-column prop="hrName" label="HR 姓名" width="120" align="center" />
      <el-table-column prop="baseSalary" label="基本工资" width="120" align="center" />
      <el-table-column prop="bonusSalary" label="绩效工资" width="120" align="center" />
      <el-table-column prop="salaryDeduction" label="扣除金额" width="120" align="center" />
      <el-table-column prop="netSalary" label="实发工资" width="120" align="center" />
      <el-table-column prop="approvalStatus" label="审批状态" width="120" align="center" />
      <el-table-column label="操作" width="160" align="center">
        <template #default="{ row }">
          <div v-if="row.approvalStatus === '待审批'">
            <el-button @click="approveSalary(row, '通过')" type="success">批准</el-button>
            <el-button
                @click="approveSalary(row, '拒绝')"
                type="danger"
                style="margin-left: 10px;"
            >
              拒绝
            </el-button>
          </div>
          <div v-else>
            <span>已审批</span>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 批量操作按钮 -->
    <div style="margin: 20px 0;">
      <el-button
          type="success"
          :disabled="selectedSalaries.length === 0"
          @click="batchApprove('通过')"
      >
        批量批准
      </el-button>

      <el-button
          type="danger"
          :disabled="selectedSalaries.length === 0"
          @click="batchApprove('拒绝')"
          style="margin-left: 10px;"
      >
        批量拒绝
      </el-button>
    </div>

    <!-- 分页 -->
    <el-pagination
        :current-page="pageNum"
        :page-size="pageSize"
        :total="total"
        layout="total, prev, pager, next"
        @current-change="handlePageChange"
    />
  </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      salaries: [], // 工资记录列表
      selectedSalaries: [], // 选中的工资记录
      pageNum: 1, // 当前页码
      pageSize: 10, // 每页显示数量
      total: 0, // 总记录数
      approvalStatusFilter: null, // 筛选条件，默认显示所有
    };
  },
  computed: {
    // 根据审批状态筛选工资记录
    filteredSalaries() {
      let filtered = this.approvalStatusFilter
          ? this.salaries.filter(
              (salary) => salary.approvalStatus === this.approvalStatusFilter
          )
          : this.salaries;
      // 返回当前页的数据
      const startIndex = (this.pageNum - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return filtered.slice(startIndex, endIndex);
    },
  },
  methods: {
    // 获取工资记录
    fetchSalaries(pageNum = this.pageNum, pageSize = this.pageSize) {
      axios
          .get("http://localhost:8080/admin/getApproveSalary", {
            params: { pageNum, pageSize, approvalStatus: this.approvalStatusFilter },
          })
          .then((response) => {
            const { records, total } = response.data.data;
            this.salaries = records;
            this.total = total;
          })
          .catch((error) => {
            console.error("获取数据失败", error);
          });
    },
    // 单条审批工资记录
    approveSalary(salary, status) {
      const updatedSalary = {...salary, approvalStatus: status};
      axios
          .post("http://localhost:8080/admin/approveSalary", updatedSalary)
          .then(() => {
            this.$message.success(`${status === "通过" ? "批准" : "拒绝"}成功`);
            this.fetchSalaries(this.pageNum, this.pageSize); // 刷新列表
          })
          .catch((error) => {
            console.error("审批失败", error);
            this.$message.error(`${status === "通过" ? "批准" : "拒绝"}失败`);
          });
    },
    // 批量审批工资记录
    batchApprove(status) {
      const updatedSalaries = this.selectedSalaries.map((salary) => ({
        ...salary,
        approvalStatus: status,
      }));
      axios
          .post("http://localhost:8080/admin/batchApproveSalary", updatedSalaries)
          .then(() => {
            this.$message.success(`${status === "通过" ? "批量批准" : "批量拒绝"}成功`);
            this.selectedSalaries = [];
            this.fetchSalaries(this.pageNum, this.pageSize); // 刷新列表
          })
          .catch((error) => {
            console.error("批量审批失败", error);
            this.$message.error(`${status === "通过" ? "批量批准" : "批量拒绝"}失败`);
          });
    },
    // 处理分页变化
    handlePageChange(newPageNum) {
      this.pageNum = newPageNum;
      this.fetchSalaries(newPageNum, this.pageSize); // 根据当前页数获取数据
    },
    // 处理多选
    handleSelectionChange(selectedRows) {
      this.selectedSalaries = selectedRows;
    },
    // 判断是否可以被选中
    isSelectable(row) {
      // 仅待审批状态显示多选框
      return row.approvalStatus === '待审批';
    },
    // 其他方法...
  },
  mounted() {
    this.fetchSalaries(); // 页面加载时获取数据
  },
};
</script>

<style scoped>
h1 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  color: #409eff;
}
.container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.el-table {
  margin-bottom: 20px;
}

.el-pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
